<script setup>
import { defineProps, reactive, watch, defineEmits } from 'vue'

const props = defineProps({
  modelValue: {
    // 修改为 modelValue 以与 v-model 一致
    type: Object,
    required: true
  },
  formLabels: {
    type: Array,
    required: true
  },
  formFields: {
    type: Array,
    required: true
  }
})
// 创建本地响应式数据
const localUserData = reactive({ ...props.modelValue })

// 监听 props 的变化，以便更新本地数据
watch(
  () => props.modelValue,
  (newVal) => {
    Object.assign(localUserData, newVal)
    // localUserData = newVal
  }
)

// 定义事件发射器
const emit = defineEmits(['modelValue'])

// 监听本地数据的变化并发射事件
watch(localUserData, (newVal) => {
  emit('modelValue', newVal) // 发射事件，将数据传回父组件
})
</script>

<template>
  <slot name="top"></slot>
  <el-form>
    <template v-for="(label, index) in formLabels" :key="index">
      <el-form-item :label="label">
        <!-- 使用英文属性名 -->
        <el-input v-model="localUserData[formFields[index]]" />
      </el-form-item>
    </template>
  </el-form>
  <slot name="bottom"></slot>
</template>
